<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 
            1. 获取两个按钮
            2. 添加鼠标click事件:程序中用户与程序发生的一些交互行为
            3. 事件监听
                button.addEventListener("clcik", function(){
                    //执行的代码
                })
         -->
        <h2>商品数量:{{num}}</h2>
        <button v-on:click="add()">+</button>
        <button v-on:click="sub()">-</button>
        <ul>
            <li v-for="(item, index) in movies">{{index + item}}</li>
        </ul>

        <ul>
            <li v-for="item in goods">商品名称:{{item.name}},价格:{{item.price}}</li>
        </ul>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                num:0,
                msg:"哈喽, Vue!!!",
                goods:[
                    {id:100, name:"和天下槟榔", price:95},
                    {id:101, name:"和天下槟榔", price:95},
                    {id:102, name:"和天下槟榔", price:95},
                    {id:103, name:"和天下槟榔", price:95},
                    {id:104, name:"和天下槟榔", price:95},
                    {id:105, name:"和天下槟榔", price:95},
                ],
                movies:["战狼", "绿皮书", "海上钢琴师", "喜羊羊与灰太狼","夺宝雄兵"]
            },
            methods:{
                add:function(){
                    //将用户的商品数量+1
                    this.num++;
                },
                sub:function(){
                    //将用户的商品数量+1
                    // if(this.num > 0){
                    //     this.num--;
                    // }

                    // boolean ? true执行的代码 : false执行的代码
                    // this.num > 0 ? this.num-- : "";
                    if(this.num <= 0)return; 
                    this.num--;
                }
            }
        });

    </script>
</body>
</html>